<!DOCTYPE html>
<html lang="en">

<head>
    <title>Sleep Health</title>
    <meta name="comp2800 template" content="Sleep Health Information">

    <!------------------------>
    <!-- Required meta tags -->
    <!------------------------>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!------------------------------------------>
    <!-- Bootstrap Library CSS JS CDN go here -->
    <!------------------------------------------>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-------------------------------------------------------->
    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <!-------------------------------------------------------->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <!-------------------------------------------->
    <!-- Other libraries and styles of your own -->
    <!-------------------------------------------->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <style>
        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('https://picsum.photos/id/1019/1920/1080') center/cover no-repeat;
            color: white;
            padding: 150px 0;
        }
        
        .section-padding {
            padding: 80px 0;
        }
        
        .feature-card {
            transition: transform 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
        }
        
        .stat-card {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
        }
        
        .testimonial-card {
            border-left: 4px solid #0d6efd;
            padding-left: 20px;
        }
        
        .tips-list li {
            margin-bottom: 15px;
        }
        
        .footer {
            background-color: #343a40;
            color: white;
            padding: 50px 0;
        }
        .navbar {
            background-color: lightskyblue;
            /* 导航栏背景色 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            /* 阴影效果 */
        }

        .navbar-brand {
            display: flex;
            /* 弹性布局，用于水平排列logo和标题 */
            align-items: center;
            /* 垂直居中 */
        }

        .navbar-brand span {
            font-weight: 600;
            /* 标题字体加粗 */
            margin-left: 0.5rem;
            /* 标题与logo间距 */
        }

        .navbar-nav .nav-link {
            /* 继承Bootstrap默认样式，无额外自定义样式 */
        }

        .navbar-nav .nav-link.active {
            /* Bootstrap默认激活状态样式 */
        }

        .btn-outline-success {
            /* 继承Bootstrap按钮样式 */
        }

        footer {
            background-color: #212529;
            /* 深灰色背景（bg-dark类对应Bootstrap默认色） */
            color: white;
            /* 文本颜色 */
            padding: 1rem 0;
            /* 垂直内边距 */
            text-align: center;
            /* 内容居中 */
        }

        footer .container {
            /* 继承Bootstrap容器样式 */
        }

        footer p {
            margin-bottom: 0.5rem;
            /* 版权文本底部间距 */
        }

        footer .mt-2 {
            margin-top: 0.5rem;
            /* 图标区域顶部间距 */
        }

        footer a {
            color: white;
            /* 图标链接颜色 */
            margin: 0 0.5rem;
            /* 图标左右间距 */
            transition: color 0.3s;
            /* 鼠标悬停动画过渡 */
        }

        footer a:hover {
            color: #007bff;
            /* 鼠标悬停时变为蓝色（可自定义） */
        }
    </style>
</head>

<body>

    <!-- 导航栏优化 -->
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: lightskyblue; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
        <div class="container-fluid">
            <a class="navbar-brand d-flex align-items-center" href="#">
                <img src="../images/biaoti.png" height="36" alt="Health Bot Logo">
                <span class="ms-2" style="font-weight: 600;">Health Bot</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" href="../aboutus.html">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../main.html">Health</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../history.html">History</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../delete_user.html">Delete</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../profile.html">Profile</a>
                    </li>
                </ul>
                <div class="d-flex">
                    <a class="btn btn-outline-success" href="../login.html">
                        <i class="fa fa-sign-out mr-1"></i> Logout
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <section class="hero-section text-center">
        <div class="container">
            <h1 class="display-2 mb-4">Sleep Health</h1>
            <p class="lead mb-6">Discover the importance of quality sleep and how it impacts your overall health and well-being.</p>
            <a href="#benefits" class="btn btn-primary btn-lg mt-4">Learn More</a>
        </div>
    </section>

    <section id="benefits" class="section-padding bg-light">
        <div class="container">
            <div class="row">
                <div class="col-md-6 mb-5">
                    <h2 class="display-5 mb-4">Why Sleep Matters</h2>
                    <p class="lead mb-4">Sleep is essential for your physical and mental health. It plays a vital role in your body's ability to repair itself, consolidate memories, and maintain a healthy immune system.</p>
                    <div class="accordion" id="sleepBenefits">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    Physical Health
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#sleepBenefits">
                                <div class="accordion-body">
                                    <p>Quality sleep helps maintain a healthy heart, regulate blood pressure, and reduce the risk of chronic diseases such as diabetes and obesity.</p>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    Mental Health
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#sleepBenefits">
                                <div class="accordion-body">
                                    <p>Sleep affects your mood, stress levels, and cognitive function. Lack of sleep can contribute to anxiety, depression, and difficulty concentrating.</p>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingThree">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    Performance
                                </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#sleepBenefits">
                                <div class="accordion-body">
                                    <p>A good night's sleep improves productivity, creativity, and physical performance. Athletes, in particular, benefit from adequate sleep for recovery and muscle growth.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <img src="https://picsum.photos/id/1056/600/400" alt="Person sleeping peacefully" class="img-fluid rounded shadow-lg">
                </div>
            </div>
        </div>
    </section>

    <section id="statistics" class="section-padding">
        <div class="container">
            <h2 class="display-5 text-center mb-6">Sleep Statistics</h2>
            <div class="row">
                <div class="col-md-6 mb-5">
                    <div class="stat-card">
                        <canvas id="sleepChart" width="400" height="400"></canvas>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <div class="stat-card">
                                <i class="fa fa-bed fa-4x text-primary mb-3"></i>
                                <h3 class="mb-2">7-9 Hours</h3>
                                <p class="text-muted">Recommended sleep for adults</p>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <div class="stat-card">
                                <i class="fa fa-users fa-4x text-success mb-3"></i>
                                <h3 class="mb-2">35%</h3>
                                <p class="text-muted">Adults get less than 7 hours</p>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <div class="stat-card">
                                <i class="fa fa-line-chart fa-4x text-warning mb-3"></i>
                                <h3 class="mb-2">60%</h3>
                                <p class="text-muted">Productivity decrease from sleep deprivation</p>
                            </div>
                        </div>
                        <div class="col-md-6 mb-4">
                            <div class="stat-card">
                                <i class="fa fa-medkit fa-4x text-danger mb-3"></i>
                                <h3 class="mb-2">50%</h3>
                                <p class="text-muted">Insomnia linked to depression</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="tips" class="section-padding bg-light">
        <div class="container">
            <h2 class="display-5 text-center mb-6">Sleep Better Tonight</h2>
            <div class="row">
                <div class="col-md-6 mb-5">
                    <div class="card feature-card">
                        <div class="card-body">
                            <h3 class="card-title"><i class="fa fa-moon-o text-primary mr-2"></i>Create a Routine</h3>
                            <ul class="tips-list list-unstyled">
                                <li><i class="fa fa-check text-success"></i> Go to bed and wake up at the same time every day</li>
                                <li><i class="fa fa-check text-success"></i> Establish a relaxing bedtime routine</li>
                                <li><i class="fa fa-check text-success"></i> Avoid screens for at least an hour before bed</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-5">
                    <div class="card feature-card">
                        <div class="card-body">
                            <h3 class="card-title"><i class="fa fa-home text-primary mr-2"></i>Optimize Your Environment</h3>
                            <ul class="tips-list list-unstyled">
                                <li><i class="fa fa-check text-success"></i> Keep your bedroom dark, quiet, and cool</li>
                                <li><i class="fa fa-check text-success"></i> Invest in a comfortable mattress and pillows</li>
                                <li><i class="fa fa-check text-success"></i> Use blackout curtains or a sleep mask if needed</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-5">
                    <div class="card feature-card">
                        <div class="card-body">
                            <h3 class="card-title"><i class="fa fa-apple text-primary mr-2"></i>Watch What You Eat</h3>
                            <ul class="tips-list list-unstyled">
                                <li><i class="fa fa-check text-success"></i> Avoid heavy meals, caffeine, and alcohol before bedtime</li>
                                <li><i class="fa fa-check text-success"></i> Have a light snack if you're hungry before bed</li>
                                <li><i class="fa fa-check text-success"></i> Stay hydrated, but limit liquids before bedtime</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-5">
                    <div class="card feature-card">
                        <div class="card-body">
                            <h3 class="card-title"><i class="fa fa-heartbeat text-primary mr-2"></i>Stay Active</h3>
                            <ul class="tips-list list-unstyled">
                                <li><i class="fa fa-check text-success"></i> Regular physical activity can help you fall asleep faster</li>
                                <li><i class="fa fa-check text-success"></i> Avoid exercising too close to bedtime</li>
                                <li><i class="fa fa-check text-success"></i> Try relaxation techniques like yoga or meditation</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="faq" class="section-padding">
        <div class="container">
            <h2 class="display-5 text-center mb-6">Frequently Asked Questions</h2>
            <div class="accordion" id="sleepFAQ">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="faqHeading1">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse1" aria-expanded="true" aria-controls="faqCollapse1">
                            How much sleep do I need?
                        </button>
                    </h2>
                    <div id="faqCollapse1" class="accordion-collapse collapse show" aria-labelledby="faqHeading1" data-bs-parent="#sleepFAQ">
                        <div class="accordion-body">
                            <p>The amount of sleep you need depends on your age. Adults generally need 7-9 hours, while teenagers need 8-10 hours, and children need even more. However, individual needs may vary.</p>
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="faqHeading2">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse2" aria-expanded="false" aria-controls="faqCollapse2">
                            What should I do if I can't fall asleep?
                        </button>
                    </h2>
                    <div id="faqCollapse2" class="accordion-collapse collapse" aria-labelledby="faqHeading2" data-bs-parent="#sleepFAQ">
                        <div class="accordion-body">
                            <p>If you can't fall asleep after 20 minutes, get out of bed and do something relaxing until you feel tired. Avoid checking the clock, as this can increase anxiety. Also, make sure your bedroom environment is conducive to sleep.</p>
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="faqHeading3">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse3" aria-expanded="false" aria-controls="faqCollapse3">
                            Are naps good or bad for sleep?
                        </button>
                    </h2>
                    <div id="faqCollapse3" class="accordion-collapse collapse" aria-labelledby="faqHeading3" data-bs-parent="#sleepFAQ">
                        <div class="accordion-body">
                            <p>Short naps (20-30 minutes) can be beneficial for alertness and productivity. However, longer naps or napping too late in the day can interfere with nighttime sleep. If you have trouble sleeping at night, it may be best to avoid napping.</p>
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="faqHeading4">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse4" aria-expanded="false" aria-controls="faqCollapse4">
                            How does stress affect sleep?
                        </button>
                    </h2>
                    <div id="faqCollapse4" class="accordion-collapse collapse" aria-labelledby="faqHeading4" data-bs-parent="#sleepFAQ">
                        <div class="accordion-body">
                            <p>Stress and anxiety can make it difficult to fall asleep or stay asleep. The body's stress response releases hormones like cortisol, which can interfere with sleep. Practicing relaxation techniques, managing stress during the day, and creating a bedtime routine can help reduce stress-related sleep problems.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="tracker" class="section-padding bg-light">
        <div class="container">
            <h2 class="display-5 text-center mb-6">Sleep Tracker</h2>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-body">
                            <h3 class="card-title">Record Your Sleep</h3>
                            <form id="sleepTrackerForm">
                                <div class="mb-3">
                                    <label for="bedtime" class="form-label">Bedtime</label>
                                    <input type="time" class="form-control" id="bedtime" required>
                                </div>
                                <div class="mb-3">
                                    <label for="waketime" class="form-label">Waketime</label>
                                    <input type="time" class="form-control" id="waketime" required>
                                </div>
                                <div class="mb-3">
                                    <label for="quality" class="form-label">Sleep Quality</label>
                                    <select class="form-control" id="quality" required>
                                        <option value="">Select quality</option>
                                        <option value="excellent">Excellent</option>
                                        <option value="good">Good</option>
                                        <option value="fair">Fair</option>
                                        <option value="poor">Poor</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-primary">Track Sleep</button>
                            </form>
                            <div id="sleepResult" class="mt-4 d-none">
                                <div class="alert alert-success">
                                    <h4 class="alert-heading">Sleep Summary</h4>
                                    <p>You slept for <span id="sleepDuration" class="fw-bold"></span> hours.</p>
                                    <p>Sleep Quality: <span id="sleepQuality" class="fw-bold"></span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="experts" class="section-padding">
        <div class="container">
            <h2 class="display-5 text-center mb-6">Expert Advice</h2>
            <div class="row">
                <div class="col-md-6 mb-5">
                    <div class="testimonial-card">
                        <blockquote class="blockquote">
                            <p class="mb-0">"Consistency is key when it comes to sleep. Your body thrives on routine, so try to go to bed and wake up at the same time every day, even on weekends."</p>
                            <footer class="blockquote-footer mt-2">Dr. Sarah Johnson, Sleep Specialist</footer>
                        </blockquote>
                    </div>
                </div>
                <div class="col-md-6 mb-5">
                    <div class="testimonial-card">
                        <blockquote class="blockquote">
                            <p class="mb-0">"The blue light emitted by phones, tablets, and computers can suppress melatonin production, making it harder to fall asleep. Avoid screens at least an hour before bedtime."</p>
                            <footer class="blockquote-footer mt-2">Dr. Michael Chen, Neurologist</footer>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="contact" class="section-padding bg-light">
        <div class="container">
            <h2 class="display-5 text-center mb-6">Have Questions?</h2>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <form id="contactForm">
                        <div class="mb-3">
                            <label for="name" class="form-label">Your Name</label>
                            <input type="text" class="form-control" id="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email Address</label>
                            <input type="email" class="form-control" id="email" required>
                        </div>
                        <div class="mb-3">
                            <label for="subject" class="form-label">Subject</label>
                            <input type="text" class="form-control" id="subject" required>
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label">Your Message</label>
                            <textarea class="form-control" id="message" rows="5" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <footer class="bg-dark text-white py-3 text-center">
        <div class="container">
            <p>&copy; 2025 Health Bot. All rights reserved.</p>
            <div class="mt-2">
                <a href="#" class="text-white mx-2"><i class="fa fa-facebook"></i></a>
                <a href="#" class="text-white mx-2"><i class="fa fa-twitter"></i></a>
                <a href="#" class="text-white mx-2"><i class="fa fa-instagram"></i></a>
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('sleepChart').getContext('2d');
            const sleepChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    datasets: [{
                        label: 'Hours of Sleep',
                        data: [7.5, 6.2, 8.0, 7.1, 6.8, 9.2, 8.5],
                        backgroundColor: [
                            'rgba(54, 162, 235, 0.7)',
                            'rgba(54, 162, 235, 0.7)',
                            'rgba(54, 162, 235, 0.7)',
                            'rgba(54, 162, 235, 0.7)',
                            'rgba(54, 162, 235, 0.7)',
                            'rgba(54, 162, 235, 0.7)',
                            'rgba(54, 162, 235, 0.7)'
                        ],
                        borderColor: [
                            'rgb(54, 162, 235)',
                            'rgb(54, 162, 235)',
                            'rgb(54, 162, 235)',
                            'rgb(54, 162, 235)',
                            'rgb(54, 162, 235)',
                            'rgb(54, 162, 235)',
                            'rgb(54, 162, 235)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 12,
                            title: {
                                display: true,
                                text: 'Hours'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: 'Day of Week'
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        title: {
                            display: true,
                            text: 'Typical Sleep Patterns'
                        }
                    }
                }
            });

            const sleepForm = document.getElementById('sleepTrackerForm');
            const sleepResult = document.getElementById('sleepResult');
            const sleepDuration = document.getElementById('sleepDuration');
            const sleepQuality = document.getElementById('sleepQuality');

            sleepForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const bedtime = new Date();
                const waketime = new Date();
                
                const bedtimeInput = document.getElementById('bedtime').value.split(':');
                const waketimeInput = document.getElementById('waketime').value.split(':');
                
                bedtime.setHours(bedtimeInput[0], bedtimeInput[1], 0);
                waketime.setHours(waketimeInput[0], waketimeInput[1], 0);

                if (waketime < bedtime) {
                    waketime.setDate(waketime.getDate() + 1);
                }
                
                const differenceInMs = waketime - bedtime;
                const hours = Math.floor(differenceInMs / (1000 * 60 * 60));
                const minutes = Math.round((differenceInMs % (1000 * 60 * 60)) / (1000 * 60));
                
                const quality = document.getElementById('quality').value;
                const qualityMap = {
                    'excellent': 'Excellent',
                    'good': 'Good',
                    'fair': 'Fair',
                    'poor': 'Poor'
                };
                
                sleepDuration.textContent = `${hours}.${minutes.toString().padStart(2, '0')}`;
                sleepQuality.textContent = qualityMap[quality] || quality;
                
                sleepResult.classList.remove('d-none');

                sleepResult.scrollIntoView({ behavior: 'smooth' });
            });

            const contactForm = document.getElementById('contactForm');
            
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();

                alert('Thank you for your message! We will get back to you soon.');
                contactForm.reset();
            });

            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    
                    const targetId = this.getAttribute('href');
                    if (targetId === '#') return;
                    
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        targetElement.scrollIntoView({
                            behavior: 'smooth'
                        });
                    }
                });
            });

            window.addEventListener('scroll', function() {
                const navbar = document.querySelector('nav');
                if (window.scrollY > 50) {
                    navbar.classList.add('shadow');
                } else {
                    navbar.classList.remove('shadow');
                }
            });
        });
    </script>
</body>

</html>
    